<template>
    <div class="py-4 px-6 flex flex-col h-full">
        <tabs-pane
            mode="default"
            face="grey"
            :index="tabIndex"
            :list="tabLists"
            @change="handleSwitchTab"
        />

        <component :is="currentComponent" v-if="componentShow" />
    </div>
</template>

<script setup lang="ts">
import Recharge from './_components/recharge.vue'
import Subscribe from './_components/subscribe.vue'

// 组件信息
const route = useRoute()
const router = useRouter()
const componentShow = ref<boolean>(true)
const currentComponent = shallowRef(Recharge)

// 选项类型
const tab = route.query.tab === 'subscribe' ? 1 : 0
const tabIndex = ref<number>(tab)
const tabLists = ref([
    {name: '充值记录'},
    {name: '订阅记录'}
])

// 切换选项
const handleSwitchTab = (index: number) => {
    tabIndex.value = index
    currentComponent.value = index === 0 ? Recharge : Subscribe
    router.replace({
        query: {
            tab: index === 1 ? 'subscribe' : 'recharge'
        }
    })
}

watch(
    () => route.query.time,
    async () => {
        componentShow.value = false
        await nextTick()
        componentShow.value = true
    }
)
</script>
